<template>
    <div class="content-wrapper">
        <div class="page-title">首页</div>

        <!-- Carousel Banner -->
        <el-card class="carousel-card">
            <el-carousel :interval="4000" type="card" height="300px" :autoplay="true" indicator-position="outside"
                arrow="hover">
                <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
                    <div class="carousel-item">
                        <img :src="item.carouelChartImages" :alt="item.carouelChartTitle" class="carousel-image"
                            @error="handleImageError" @load="handleImageLoad">
                        <div class="carousel-content">
                            <h3 class="carousel-title">{{ item.carouelChartTitle }}</h3>
                            <p class="carousel-description">{{ item.carouelChartDescription }}</p>
                            <el-button v-if="item.carouelChartUrl" type="primary" size="large"
                                @click="handleCarouselAction(item)">
                                了解更多
                            </el-button>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-card>


        <!-- Quick Actions -->
        <el-card class="section-card">
            <template #header>
                <div class="section-title">快捷操作</div>
            </template>
            <div class="quick-actions">
                <div class="action-item">
                    <div class="action-icon">💬</div>
                    <div class="action-text">问诊单</div>
                </div>
                <div class="action-item">
                    <div class="action-icon">📋</div>
                    <div class="action-text">处方单</div>
                </div>
                <div class="action-item">
                    <div class="action-icon">💊</div>
                    <div class="action-text">药品单</div>
                </div>
                <div class="action-item">
                    <div class="action-icon">🏥</div>
                    <div class="action-text">挂号单</div>
                </div>
                <div class="action-item">
                    <div class="action-icon">👥</div>
                    <div class="action-text">用户管理</div>
                </div>
                <div class="action-item">
                    <div class="action-icon">👨‍⚕️</div>
                    <div class="action-text">医生审核</div>
                </div>
                <div class="action-item">
                    <div class="action-icon">➕</div>
                    <div class="action-text">添加药品</div>
                </div>
            </div>
        </el-card>

        <!-- Pending Tasks -->
        <el-card class="section-card">
            <template #header>
                <div class="section-title">待处理事务</div>
            </template>
            <div class="pending-tasks">
                <div class="task-item">待审核医生 (20)</div>
                <div class="task-item">待处理退款 (20)</div>
                <div class="task-item">待审核药品 (20)</div>
                <div class="task-item">广告位即将到期 (20)</div>
            </div>
        </el-card>

        <!-- User & Doctor Stats -->
        <div class="stats-overview">
            <el-card class="stats-column">
                <template #header>
                    <div class="stats-header">用户总览</div>
                </template>
                <div class="stats-grid">
                    <div class="stats-item">
                        <div class="stats-number">100</div>
                        <div class="stats-label">今日新增</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-number">100</div>
                        <div class="stats-label">昨日新增</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-number">2000</div>
                        <div class="stats-label">本月新增</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-number">20000</div>
                        <div class="stats-label">用户总数</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stats-column">
                <template #header>
                    <div class="stats-header">医生总览</div>
                </template>
                <div class="stats-grid">
                    <div class="stats-item">
                        <div class="stats-number">100</div>
                        <div class="stats-label">今日新增</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-number">100</div>
                        <div class="stats-label">昨日新增</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-number">2000</div>
                        <div class="stats-label">本月新增</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-number">20000</div>
                        <div class="stats-label">医生总数</div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- Transaction Stats -->
        <el-card class="section-card">
            <template #header>
                <div class="section-title">
                    交易统计
                    <el-date-picker v-model="selectedDate" type="month" placeholder="选择月份" format="YYYY-MM"
                        value-format="YYYY-MM" class="date-picker" />
                </div>
            </template>
            <div class="chart-area">
                <div class="unit-label">单位:万元</div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { readB } from '@/api/http';

const selectedDate = ref('2020-03')


// 轮播图数据
const carouselImages = ref([
    {
        "id": 0,
        "carouelChartTitle": "string",
        "carouelChartImages": "string",
        "ststus": true,
        "carouelChartUrl": "string",
        "orderby": 0,
        "createdTime": "2025-07-30T11:55:55.619Z",
        "createdBy": 0
    },

])

// 处理轮播图按钮点击事件
const handleCarouselAction = (item: any) => {
    if (item.carouelChartUrl) {
        // 如果有URL，可以跳转到指定页面
        ElMessage.success('正在跳转到相关页面...')
        // 这里可以添加路由跳转逻辑
        // router.push(item.carouelChartUrl)
    } else {
        ElMessage.info('功能开发中...')
    }
}

// 处理图片加载错误
const handleImageError = (event: Event) => {
    const img = event.target as HTMLImageElement
    console.error('图片加载失败:', img.src)
    // 设置默认图片
    img.src = 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'
    // 添加错误样式
    img.style.opacity = '0.8'
    img.style.filter = 'grayscale(20%)'
}

// 处理图片加载成功
const handleImageLoad = (event: Event) => {
    const img = event.target as HTMLImageElement
    console.log('图片加载成功:', img.src)
}

// 加载轮播图数据
const loadCarouselData = async () => {
    try {
        //这里可以调用API获取轮播图数据
        const response = await readB('/api/Carousel/GetCarouselList/list?PageIndex=1&PageSize=4&Status=true')
        console.log('API响应:', response)
        console.log('API响应数据结构:', JSON.stringify(response, null, 2))

        // 检查不同的响应结构可能性
        let data = null
        if (response && response.data) {
            // 检查是否有嵌套的 data 字段
            if (response.data.data) {
                data = response.data.data
            } else if (response.data.pageData) {
                data = response.data.pageData
            } else if (Array.isArray(response.data)) {
                data = response.data
            } else if (response.data.list) {
                data = response.data.list
            } else {
                data = response.data
            }
        }

        // 如果 pageData 为 null 或没有数据，使用默认数据
        if (!data || (Array.isArray(data) && data.length === 0)) {
            console.log('API返回的数据为空，使用默认轮播图数据')
            carouselImages.value = [
                {
                    id: 1,
                    carouelChartTitle: '专业医疗服务',
                    carouelChartDescription: '提供全方位的医疗咨询和健康管理服务',
                    carouelChartImages: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                    carouelChartUrl: '',
                    ststus: true,
                    orderby: 1,
                    createdTime: new Date().toISOString(),
                    createdBy: 1
                },
                {
                    id: 2,
                    carouelChartTitle: '在线问诊平台',
                    carouelChartDescription: '24小时在线医生问诊服务',
                    carouelChartImages: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                    carouelChartUrl: '',
                    ststus: true,
                    orderby: 2,
                    createdTime: new Date().toISOString(),
                    createdBy: 1
                },
                {
                    id: 3,
                    carouelChartTitle: '健康管理',
                    carouelChartDescription: '个性化健康管理方案',
                    carouelChartImages: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                    carouelChartUrl: '',
                    ststus: true,
                    orderby: 3,
                    createdTime: new Date().toISOString(),
                    createdBy: 1
                }
            ]
            return
        }

        if (Array.isArray(data)) {
            console.log('找到数据数组:', data)

            // 过滤状态为true的数据，并确保图片URL正确
            const filteredData = data.filter(item => {
                console.log('轮播图项目:', item)
                // 检查不同的状态字段名
                const status = item.ststus || item.status || item.isActive
                return status === true || status === 'true' || status === 1
            })

            console.log('过滤后的数据:', filteredData)

            // 处理图片URL，确保是完整的URL
            carouselImages.value = filteredData.map(item => {
                let imageUrl = item.carouelChartImages || item.imageUrl || item.image || ''

                // 如果图片URL不是完整的HTTP URL，添加基础URL
                if (imageUrl && !imageUrl.startsWith('http')) {
                    imageUrl = `http://47.95.68.41:4550${imageUrl}`
                }

                return {
                    ...item,
                    carouelChartImages: imageUrl,
                    carouelChartTitle: item.carouelChartTitle || item.title || '轮播图标题',
                    carouelChartDescription: item.carouelChartDescription || item.description || item.carouelChartTitle || '轮播图描述'
                }
            })

            console.log('处理后的轮播图数据:', carouselImages.value)

            if (carouselImages.value.length === 0) {
                ElMessage.warning('没有找到可用的轮播图数据，使用默认数据')
                // 使用默认数据
                carouselImages.value = [
                    {
                        id: 1,
                        carouelChartTitle: '专业医疗服务',
                        carouelChartDescription: '提供全方位的医疗咨询和健康管理服务',
                        carouelChartImages: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                        carouelChartUrl: '',
                        ststus: true,
                        orderby: 1,
                        createdTime: new Date().toISOString(),
                        createdBy: 1
                    },
                    {
                        id: 2,
                        carouelChartTitle: '在线问诊平台',
                        carouelChartDescription: '24小时在线医生问诊服务',
                        carouelChartImages: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                        carouelChartUrl: '',
                        ststus: true,
                        orderby: 2,
                        createdTime: new Date().toISOString(),
                        createdBy: 1
                    }
                ]
            }
        } else {
            console.warn('API响应格式不正确:', response)
            ElMessage.warning('轮播图数据格式不正确，使用默认数据')
            // 使用默认数据
            carouselImages.value = [
                {
                    id: 1,
                    carouelChartTitle: '专业医疗服务',
                    carouelChartDescription: '提供全方位的医疗咨询和健康管理服务',
                    carouelChartImages: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                    carouelChartUrl: '',
                    ststus: true,
                    orderby: 1,
                    createdTime: new Date().toISOString(),
                    createdBy: 1
                },
                {
                    id: 2,
                    carouelChartTitle: '在线问诊平台',
                    carouelChartDescription: '24小时在线医生问诊服务',
                    carouelChartImages: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                    carouelChartUrl: '',
                    ststus: true,
                    orderby: 2,
                    createdTime: new Date().toISOString(),
                    createdBy: 1
                }
            ]
        }
    } catch (error) {
        console.error('加载轮播图数据失败:', error)
        ElMessage.error('加载轮播图数据失败')

        // 如果API失败，使用默认数据
        carouselImages.value = [
            {
                id: 1,
                carouelChartTitle: '专业医疗服务',
                carouelChartDescription: '提供全方位的医疗咨询和健康管理服务',
                carouelChartImages: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                carouelChartUrl: '',
                ststus: true,
                orderby: 1,
                createdTime: new Date().toISOString(),
                createdBy: 1
            },
            {
                id: 2,
                carouelChartTitle: '在线问诊平台',
                carouelChartDescription: '24小时在线医生问诊服务',
                carouelChartImages: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
                carouelChartUrl: '',
                ststus: true,
                orderby: 2,
                createdTime: new Date().toISOString(),
                createdBy: 1
            }
        ]
    }
}

// 组件挂载时加载数据
onMounted(() => {
    loadCarouselData()
})
</script>
<style scoped>
.index-container {
    height: 100vh;
    background-color: #f5f5f5;
}

.main-header {
    background-color: #2196F3;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}

.header-title {
    font-size: 18px;
    font-weight: bold;
}

.header-actions {
    display: flex;
    gap: 20px;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.header-action:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.main-container {
    height: calc(100vh - 60px);
}

.main-sidebar {
    background-color: white;
    border-right: 1px solid #e0e0e0;
}

.el-menu-vertical {
    border-right: none;
}

.menu-item {
    border-bottom: 1px solid #f0f0f0;
}

.menu-item.active {
    background-color: #e3f2fd;
    border-left: 4px solid #2196F3;
}

.submenu-item {
    padding-left: 40px !important;
}

.main-content {
    padding: 20px;
    background-color: #f9f9f9;
}

.content-wrapper {
    background-color: white;
    border-radius: 4px;
    padding: 20px;
    min-height: calc(100vh - 140px);
}

.page-title {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

/* 轮播图样式 */
.carousel-card {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.carousel-item {
    height: 300px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
}

.carousel-content {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    z-index: 2;
    color: white;
    max-width: 500px;
}

.carousel-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-description {
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 轮播图指示器样式 */
:deep(.el-carousel__indicators) {
    bottom: 20px;
}

:deep(.el-carousel__indicator) {
    background-color: rgba(255, 255, 255, 0.5);
}

:deep(.el-carousel__indicator.is-active) {
    background-color: #409eff;
}

/* 轮播图箭头样式 */
:deep(.el-carousel__arrow) {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
}

:deep(.el-carousel__arrow:hover) {
    background-color: rgba(255, 255, 255, 0.9);
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    text-align: center;
    border: 1px solid #e0e0e0;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #f44336;
    margin-bottom: 10px;
}

.stat-label {
    color: #666;
    font-size: 14px;
}

.section-card {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #333;
}

.date-picker {
    width: 120px;
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2196F3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 20px;
}

.action-text {
    font-size: 12px;
    color: #666;
    text-align: center;
}

.pending-tasks {
    display: flex;
    justify-content: space-around;
}

.task-item {
    padding: 10px;
    color: #666;
    font-size: 14px;
}

.stats-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.stats-column {
    border: 1px solid #e0e0e0;
}

.stats-header {
    font-weight: bold;
    color: #333;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 20px;
}

.stats-item {
    text-align: center;
}

.stats-number {
    font-size: 18px;
    font-weight: bold;
    color: #f44336;
    margin-bottom: 5px;
}

.stats-label {
    font-size: 12px;
    color: #666;
}

.chart-area {
    padding: 20px;
    min-height: 200px;
    position: relative;
}

.unit-label {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: #666;
    font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .carousel-content {
        left: 20px;
        max-width: 300px;
    }

    .carousel-title {
        font-size: 24px;
    }

    .carousel-description {
        font-size: 14px;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-overview {
        grid-template-columns: 1fr;
    }
}
</style>